<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml" style="overflow-x: auto">
<head>
    <head th:include="header :: header"></head>
    <title></title>
    <style>
        #logConsole br{
            margin-bottom: 5px;
        }
        pre{
            border: unset;
            border-radius: unset;
            height: 100%;
        }
        html,body,.content-wrapper{
            height: 100%;
            background-color: #2e3b48;
        }
    </style>
    <script>
        var base_url = "";
        // 参数
        var triggerCode = '[[${triggerCode}]]';
        var handleCode = '[[${handleCode}]]';
        var executorAddress = '[[${executorAddress}]]';
        var triggerTime = '[[${triggerTime}]]';
        var logId = '[[${logId}]]';
        globalAjaxLodingFlag = false;
        $(function() {

            // trigger fail, end
            if ( !(triggerCode == 200 || handleCode != 0) ) {
                $('#logConsoleRunning').hide();
                $('#logConsole').append('<span style="color: red;">任务发起调度失败，无法查看执行日志</span>');
                return;
            }
            // pull first page
            pullLog();

            // handler already callback, end
            if (handleCode > 0) {
                logFinish('<br><span style="color: green;">[Rolling Log Finish]</span>');
                return;
            }
            // round until end
            logRunFn();
        });
        // pull log
        var fromLineNum = 1;
        var pullFailCount = 0;
        var maxLengthPre = window.innerWidth;
        function pullLog() {
            // pullFailCount, max=20
            if (pullFailCount++ > 20) {
                logRunStop('<span style="color: red;">终止请求Rolling日志,请求失败次数超上限,可刷新页面重新加载日志</span>');
                return;
            }

            $.ajax({
                type : 'POST',
                async: false,   // sync, make log ordered
                url : base_url + '/joblog/logDetailCat',
                data : {
                    "executorAddress":executorAddress,
                    "triggerTime":triggerTime,
                    "logId":logId,
                    "fromLineNum":fromLineNum
                },
                dataType : "json",
                success : function(data){
                    if (data.code == 200) {
                        if (!data.content) {
                            console.log('pullLog fail');
                            return;
                        }
                        if (fromLineNum != data.content.fromLineNum) {
                            console.log('pullLog fromLineNum not match');
                            return;
                        }
                        if (fromLineNum > data.content.toLineNum ) {
                            console.log('pullLog already line-end');

                            // valid end
                            if (data.content.end) {
                                logFinish('<br><span style="color: green;">[Rolling Log Finish]</span>');
                                return;
                            }

                            return;
                        }

                        // append content
                        fromLineNum = data.content.toLineNum + 1;
                        $('#logConsole').append(data.content.logContent);
                        pullFailCount = 0;

                        // scroll to bottom
                        scrollTo(0, document.body.scrollHeight);        // $('#logConsolePre').scrollTop( document.body.scrollHeight + 300 );

                        // 获取pre元素
                        const preElement = document.getElementById('logPre');
                        const scrollWidth = preElement.scrollWidth;
                        if(scrollWidth > maxLengthPre){
                            maxLengthPre = scrollWidth;
                            document.body.style.width = maxLengthPre + 'px';
                        }
                    } else {
                        console.log('pullLog fail:'+data.msg);
                    }
                }
            });
        }

        var logRun = null;
        var layerIndex = null;
        function initLayer(index){
            layerIndex = index;
        }
        function logRunFn(){
            $('#logConsoleRunning').show();
            logRun = setInterval(function () {
                pullLog()
            }, 3000);
        }
        function logRunStop(content){
            $('#logConsoleRunning').hide();
            logRun = window.clearInterval(logRun);
            $('#logConsole').append(content);
        }
        function logFinish(text){
            logRunStop(text);
            layerListhen();
        }
        var layerOpen = null;
        function layerListhen() {
            layerOpen = setInterval(function () {
                if(layerIndex != null){
                    var btns = parent.document.getElementById("layui-layer"+layerIndex).getElementsByClassName("layui-layer-btn");
                    if(btns.length == 1){
                        var btn0 = btns[0].getElementsByClassName("layui-layer-btn0");
                        var btn1 = btns[0].getElementsByClassName("layui-layer-btn1");
                        if(btn0.length == 1){
                            btn0[0].style.display = 'none';
                        }
                        if(btn1.length == 1){
                            btn1[0].style.display = 'none';
                        }
                    }
                    window.clearInterval(layerOpen);
                }
            }, 1000);
        }
    </script>
</head>
<body>
<div class="content-wrapper" >
    <section class="content">
            <pre id="logPre" style="font-size:10px;position:relative;color:#d2ddbe;background-color: #2e3b48; overflow: hidden" >
                <div id="logConsole"></div>
                <li class="fa fa-refresh fa-spin" style="font-size: 20px;float: left;" id="logConsoleRunning" ></li>
            </pre>
    </section>
</div>
</body>
</html>